<template>
  <div class="app-container">
    <!--搜索面板-->
    <div class="filter-container">
      <el-form :model="searchForm" status-icon ref="searchForm" label-width="90px">
        <el-row :gutter="10">
          <el-col :sm='6'>
            <el-form-item label="收货人姓名" prop="name">
              <el-input v-model.trim="searchForm.name" placeholder="请输入名称" clearable
                        @keyup.enter.native="handleFilter"/>
            </el-form-item>
          </el-col>
          <el-col :sm='6'>
            <el-form-item label="收货人电话" prop="mobile">
              <el-input v-model.trim="searchForm.mobile" placeholder="请输入手机号" clearable
                        @keyup.enter.native="handleFilter"/>
            </el-form-item>
          </el-col>
          <el-col :sm='6'>
            <el-form-item label="学校/楼栋" prop="areaPath">
              <el-cascader
                @keyup.enter.native="handleFilter"
                placeholder="请选择学校/楼栋"
                clearable
                v-model="searchForm.areaPath"
                :key="searchForm.areaPath"
                :options="schoolList"
                :props="{ checkStrictly: true }"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :sm='6'>
            <el-form-item label="用户" prop="memberId">
              <el-select v-model="searchForm.memberId" clearable placeholder="请选择用户"
                         @keyup.enter.native="handleFilter">
                <el-option
                  v-for="item in memberList"
                  :key="item.id"
                  :label="item.nickName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label-width="20px">
              <el-button v-waves type="success" icon="el-icon-plus" @click="handleEdit()">新增
              </el-button>
              <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
              </el-button>
              <el-button v-waves icon="el-icon-refresh" @click="handleReset">
                重置
              </el-button>
              <el-button v-waves type="danger" icon="el-icon-delete" @click="handleRemove()">
                批量删除
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <PageTable class="containtable" :query-method="page" :query-form="searchForm" ref="pageTable">
      <el-table-column label="用户姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学校名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.schoolName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="楼栋名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="宿舍/门牌地址" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否默认" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.def===1">是</span>
          <span v-if="scope.row.def===0">否</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-remove" @click="handleRemove(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </PageTable>
    <!--分页-->

    <!--新增-->
    <el-dialog title="编辑" :visible.sync="editFormShow" :center="true" width="880px" :close-on-click-modal="false">
      <el-form status-icon :rules="rules" :model="editForm" ref="editForm" label-width="120px">
        <el-row>

          <el-col :sm="12">
            <el-form-item label="用户:" prop="memberId">
              <el-select v-model="editForm.memberId" clearable placeholder="请选择用户"
                         @keyup.enter.native="handleFilter">
                <el-option
                  v-for="item in memberList"
                  :key="item.id"
                  :label="item.nickName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="收货人姓名:" prop="name">
              <el-input type="text" v-model.trim="editForm.name" placeholder="请输入收货人姓名"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="收货人电话:" prop="mobile" :maxlength="11">
              <el-input type="text" v-model.trim="editForm.mobile" placeholder="请输入收货人电话"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="学校/楼栋:" prop="areaPath">
              <el-cascader
                placeholder="请选择学校/楼栋"
                clearable
                v-model="editForm.areaPath"
                :key="editForm.areaPath"
                :options="schoolList"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="宿舍/门牌地址:" prop="address">
              <el-input type="text" v-model.trim="editForm.address" placeholder="请输入宿舍/门牌地址"/>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="是否默认:" prop="def">
              <el-select v-model="editForm.def" clearable placeholder="请选择是否默认">
                <el-option
                  v-for="item in defList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" v-waves @click="onSubmit('editForm')" icon="el-icon-success" v-loading="loading">
          提交
        </el-button>
        <el-button v-waves @click="onCancel" icon="el-icon-error">取消</el-button>
      </div>
    </el-dialog>
    <!--新增-->
  </div>
</template>

<script>
import waves from '@/directive/waves'
import PageTable from "@/components/Pagination/PageTable";
import {page, detail, edit, remove, schoolList, memberList} from '@/api/admin/member/dormitory'

export default {
  name: 'memberMemberDormitory',
  components: {
    PageTable
  },
  directives: {
    waves
  },
  data() {
    return {
      page,
      loading: false,
      memberList: [],
      defList: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ],
      searchForm: {
        mobile: '',
        name: '',
        areaPath: '',
        memberId: '',
        areaId: '',
      },
      schoolList: [],
      rules: {
        memberId: [
          {required: true, message: '请选择用户', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入收货人姓名', trigger: 'blur'}
        ],
        mobile: [
          {required: true, message: '请输入收货人电话', trigger: 'blur'}
        ],
        areaPath: [
          {required: true, message: '请输入学校/楼栋', trigger: 'blur'}
        ],
        // schoolId:  [
        //     {required: true, message: '请输入学校id', trigger: 'blur'}
        // ],
        // schoolName:  [
        //     {required: true, message: '请输入学校名称', trigger: 'blur'}
        // ],
        // buildingId:  [
        //     {required: true, message: '请输入楼栋id', trigger: 'blur'}
        // ],
        // buildingName:  [
        //     {required: true, message: '请输入楼栋名称', trigger: 'blur'}
        // ],
        address: [
          {required: true, message: '请输入宿舍/门牌地址', trigger: 'blur'}
        ],
        def: [
          {required: true, message: '请输入是否默认', trigger: 'blur'}
        ],
      },
      editFormShow: false,
      editForm: {
        id: '',
        memberId: '',
        name: '',
        mobile: '',
        schoolId: '',
        schoolName: '',
        buildingId: '',
        buildingName: '',
        address: '',
        def: '',
        areaPath: '',
      },
    }
  },
  methods: {
    //查询所有学校信息
    getSchoolList() {
      schoolList().then(result => {
        this.schoolList = result.data.areaList
      })
    },
    //查询所有用户信息
    getMemberList() {
      memberList().then(result => {
        this.memberList = result.data.memberList
      })
    },
    handleFilter() {
      if (this.searchForm.areaPath !== null && this.searchForm.areaPath !== '') {
        this.searchForm.areaId = this.searchForm.areaPath.pop()
        this.searchForm.areaPath.push(this.searchForm.areaId)
      } else {
        this.searchForm.areaPath = null;
        this.searchForm.areaId = null;
      }
      this.$refs.pageTable.reset();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.$refs.pageTable.reset();
    },
    handleEdit(row) {
      this.loading = false;
      this.editFormShow = true;
      this.editForm.id = '';
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate();
        this.$refs.editForm.resetFields();
      });
      if (!row) {
        return;
      }
      detail({id: row.id}).then(res => {
        this.editForm.id = row.id;
        Object.entries(res.data.dormitory).forEach(([key, val]) => {
          if (this.editForm[key] !== undefined) {
            this.editForm[key] = val;
          }
        });
      })
    },
    //提交表单
    onSubmit(editForm) {
      if (this.loading) {
        return
      }
      this.loading = true;
      this.$refs[editForm].validate((valid) => {
        if (!valid) {
          this.loading = false;
          return false;
        }
        if (this.editForm.areaPath !== null && this.editForm.areaPath !== '') {
          this.editForm.areaId = this.editForm.areaPath.pop()
          this.editForm.areaPath.push(this.editForm.areaId)
        } else {
          this.editForm.areaPath = null;
          this.editForm.areaId = null;
        }

        edit(this.editForm).then(() => {
          this.$notify({
            title: '提示',
            message: '提交成功',
            type: 'success'
          });
          this.$refs.pageTable.refresh();
          this.editFormShow = false;
        }).finally(() => {
          this.loading = false;
        })
      })
    },
    //删除用户
    handleRemove(id) {
      if (!id) {
        id = this.$refs.pageTable.selects.map(item => item.id).join(',')
      }
      if (!id) {
        this.$message({
          type: 'error',
          message: '请选择要操作的记录!'
        });
        return;
      }
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ids: id}).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$refs.pageTable.refresh();
        })
      });
    },
    // 取消提交
    onCancel: function () {
      this.editFormShow = false;
    }
  },
  mounted() {
    this.$refs.pageTable.refresh();
  },
  created() {
    this.getSchoolList();
    this.getMemberList();
  }
}
</script>

<style scoped>

</style>

